<template>
    <PageWrapper title="文章列表">
        <div class="content p-4">
            <BasicTable @register="registerTable">
                <Spin :spinning="loading" tip="加载中..." />
                <template #toolbar>
                    <a-button type="primary" @register="registerEditModal" @click="addModalClick"
                        >添加文章
                    </a-button>
                </template>
                <template #title="{ text }">
                    {{ text ? text : '-' }}
                </template>

                <!-- 操作 -->
                <template #action="{ record }">
                    <Action
                        :style="'height:46px'"
                        :showDelete="true"
                        @edit="editModalClick(record)"
                        @delete="deleteTableEvent(record)"
                    ></Action>
                </template>
            </BasicTable>
            <!-- 编辑弹窗 -->
            <EditModal
                :selectItem="selectItem.item"
                @register="registerEditModal"
                @updateData="updateTable"
            ></EditModal>
        </div>
    </PageWrapper>
</template>

<script lang="ts">
    import { defineComponent, reactive, ref } from 'vue'
    import { PageWrapper } from '/@/components/Page'
    import { BasicTable, useTable, TableImg } from '/@/components/Table'
    import { Columns, FormConfig } from './model/model'
    import { DataItem, DataListParams, DeleteParams } from '/@/api/content/article/model/model'
    import { dataListApi, deleteApi } from '/@/api/content/article/index'
    import { Avatar, Tag, message, Spin } from 'ant-design-vue'
    import { UserOutlined } from '@ant-design/icons-vue'
    import EditModal from './components/edit.vue'
    import { useModal } from '/@/components/Modal'
    import Action from '/@/components/Action.vue'
    export default defineComponent({
        name: 'articleList',
        components: {
            PageWrapper,
            EditModal,
            BasicTable,
            Avatar,
            UserOutlined,
            TableImg,
            Tag,
            Spin,
            Action,
        },
        setup() {
            const loading = ref(false)
            // 表格
            const [registerTable, { reload }] = useTable({
                title: '文章列表',
                titleHelpMessage: '文章列表',
                ellipsis: true,
                canResize: true,
                bordered: true,
                rowKey: '_id',
                showTableSetting: true,
                immediate: true,
                columns: Columns,
                useSearchForm: false, // 开启搜索表单
                formConfig: FormConfig as any, // 搜索表达配置
                actionColumn: {
                    title: '操作',
                    dataIndex: 'action',
                    fixed: 'left',
                    width: 140,
                    slots: { customRender: 'action' },
                },
                api: async (data: any) => {
                    const res = await dataListApi(data)
                    return {
                        items: res.list,
                        total: res.count,
                    }
                },
                beforeFetch: (pageData: any) => {
                    // 请求前数据处理
                    console.log('页面数据', pageData)
                    const data: DataListParams = {
                        page: pageData.page,
                        limit: pageData.pageSize,
                        title: pageData.title,
                    }
                    return data
                },
            })

            // 编辑弹窗 props
            const selectItem = reactive<{ item: DataItem | null }>({
                item: null,
            })

            // 编辑弹窗
            const [registerEditModal, { openModal }] = useModal()
            const editModalClick = (record: DataItem) => {
                console.log(record)
                selectItem.item = record
                setTimeout(() =>
                    openModal(true, {
                        record,
                        isUpdate: true,
                    })
                )
            }
            // 添加
            const addModalClick = () => {
                selectItem.item = null
                setTimeout(() => {
                    openModal()
                })
            }
            // 删除
            const deleteTableEvent = async (record: DataItem) => {
                loading.value = true
                const data: DeleteParams = {
                    _id: record._id,
                }
                const res = await deleteApi(data)
                loading.value = false
                if (res) {
                    reload()
                    message.success('删除成功!')
                }
            }
            // 更新表格
            const updateTable = () => {
                reload()
            }
            return {
                registerTable,
                registerEditModal,
                editModalClick,
                addModalClick,
                deleteTableEvent,
                selectItem,
                updateTable,
                loading,
            }
        },
    })
</script>

<style lang="less">
    .vben-basic-table-img.check-img {
        height: 46px !important;
        align-content: center;
        justify-content: center;

        .ant-image {
            margin: auto;

            .ant-image-img {
                width: 40px;
                height: 40px;
                object-fit: cover;
            }
        }
    }

    .unsend {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 46px;
    }
</style>
